<template>
	<view>
		<cu-custom  bgColor="bg-black-two"  :isBack="false">
			<block slot="content">报表</block>
		</cu-custom>
		<view class="flex justify-center">
			<view @click="linktoPage('/pages/tabBar/report')" class="padding title-text">统计</view>
			<view class="padding title-text-selected">日报表</view>
		</view>
		
		
		<view class="my-bg" style="padding: 18px 10px;">
			<view class="flex justify-between">
				<view class="radius text-center" @click="openStart" style="color: #fff;border: 1px solid #00A99D;padding: 5px;width: 35%;">
					{{startDate}}
					<text class="cuIcon-unfold"
						style="color: #00A99D;font-size: 15px; font-weight: bold;"></text>
				</view>
				<uni-calendar ref="calendarStart" :insert="false" @confirm="confirmStart" :date="startDate"/>
				<view style="width: 30%;">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
			</view>
		</view>
		<view class="my-bg">
			<view class="flex justify-center">
				<view class="text-center" style="margin: 10px 35px;">
					<view class="text-xxl text-white">{{sum_machine}}</view>
					<view class="text-gray">当班运行/台</view>
				</view>
				<view class="text-center" style="margin: 10px 35px;">
					<view class="text-xxl text-white">{{sum_output}}</view>
					<view class="text-gray">总产量/件</view>
				</view>
			</view>
			<view class="text-xxl text-right" style="display:none;border-top: 1px solid #828285;padding: 10px 15px">
				<text :class="'cuIcon-' + 'down'" 
					style="color: #23CE9A;font-weight: bold;padding-right: 10px;"></text>
				<text :class="'cuIcon-' + 'share'" style="color: #FE6B01;font-weight: bold;"></text>
			</view>
		</view>
		<view v-for="(item,index) in machine_list" :key="index" class="my-bg">
			<view class="padding text-lg text-white" style="padding: 5px 0px 0px 5px;">
				{{item.machine_name}}
			</view>
			<view class="flex justify-center">
				<view class="padding text-center" style="padding-bottom: 5px;">
					<view class="text-xl text-white">{{item.run_rate}}%</view>
					<view class="text-gray">开机生产率</view>
				</view>
				<view class="padding text-center" style="padding-bottom: 5px;">
					<view class="text-xl text-white">{{item.run_hour}}</view>
					<view class="text-gray">总生产时长/h</view>
				</view>
				<view class="padding text-center" style="padding-bottom: 5px;">
					<view class="text-xl text-white">{{item.standby_hour}}</view>
					<view class="text-gray">待机时长/h</view>
				</view>
			</view>
			<view class="text-right" style="border-top: 1px solid #828285;color: #fff;padding: 8px 5px;margin-top: 8px;">
				<view class="flex solid-bottom align-start">
					<view class="margin-xs text-left" style="width: 15%;">
						<view>工件</view>
					</view>
					<view class="margin-xs text-left" style="width: 25%;">
						<view>生产时长/h</view>
					</view>
					<view class="margin-xs text-left" style="width: 25%;">
						<view>理论产量</view>
					</view>
					<view class="margin-xs text-left" style="width: 25%;">
						<view>实际产量</view>
					</view>
					<view class="margin-xs text-left" style="width: 10%;">
						<view>节拍</view>
					</view>
				</view>
				<view v-for="(value,key) in item.detail_list" :key="key"  class="flex solid-bottom align-start">
					<!-- 工件 -->
					<view class="margin-xs text-left" style="width: 15%;">
						<view>{{value.product_name}}</view>
					</view>
					<!-- 生产时长/h -->
					<view class="margin-xs text-left" style="width: 25%;">
						<view>{{value.shift_run_time}}</view>
					</view>
					<!-- 理论产量 -->
					<view class="margin-xs text-left" style="width: 25%;">
						<view>{{value.theory_output}}</view>
					</view>
					<!-- 实际产量 -->
					<view class="margin-xs text-left" style="width: 25%;">
						<view>{{value.shift_output}}</view>
					</view>
					<!-- 节拍 -->
					<view class="margin-xs text-left" style="width: 10%;">
						<view>{{value.shift_cycle}}s</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height:1px;margin-bottom: 50px;"></view>
		<view class="flex" style="position:fixed;bottom: -30px;background-color: #171723;width: 100%;padding: 5px 15px 35px 15px;">
			<view class="flex-sub text-center" @click="linktoPage('/pages/tabBar/home')">
				<view>
					<image src="@/static/image/tabBar/home.png" style="width: 25px;height: 25px;"></image>
				</view>
				<view style="font-size: 10px;">首页</view>
			</view>
			<view class="flex-sub text-center" @click="linktoPage('/pages/tabBar/machine-index')">
				<view>
					<image src="@/static/image/tabBar/machine.png" style="width: 25px;height: 25px;"></image>
				</view>
				<view style="font-size: 10px;">设备</view>
			</view>
			<view class="flex-sub text-center" @click="linktoPage('/pages/tabBar/energy')">
				<view>
					<image src="@/static/image/tabBar/energy.png" style="width: 25px;height: 25px;"></image>
				</view>
				<view style="font-size: 10px;">能耗</view>
			</view>
			<view class="flex-sub text-center" @click="linktoPage('/pages/tabBar/report')">
				<view>
					<image src="@/static/image/tabBar/report-selected.png" style="width: 25px;height: 25px;"></image>
				</view>
				<view style="font-size: 10px;color: #00A99D;">报表</view>
			</view>
			<view class="flex-sub text-center" @click="linktoPage('/pages/tabBar/center')">
				<view>
					<image src="@/static/image/tabBar/my.png" style="width: 25px;height: 25px;"></image>
				</view>
				<view style="font-size: 10px;">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getNowDate,getNowTime} from '@/common/util.js'
	import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
	export default{
		name: 'Calendar',
		components: {
			zsyCalendar
		},
		data(){
			return{
				startDate:'',
				sum_output:0,//总产量
				sum_machine:0,//设备总数
				machine_list:[],//设备列表
				//班次选项卡	
				items: ['早班', '晚班'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#fff',
				styleType: 'button'
				
			}
		},
		onShow() {
			this.startDate = getNowDate();
			this.getShiftData();
			this.getInitData();
		},
		methods:{
			//获取当前客户的班次列表
			async getShiftData(){
				// position =>  1:首页，2:设备，3:能耗，4:报表
				let [err,res] = await this.$http.post('shiftList',{},{
					token:true,
					checkToken:true ,
				});
				this.items = res.data.data.shift_list;
				this.current = res.data.data.shift_index;//当前时间所属班次
			},
			//获取数据源
			async getInitData(){
				uni.showLoading({title:'加载中...',mask:true});
				//请求
				let [err,res] = await this.$http.post('getReportDayData',{startDate:this.startDate,shiftName:this.items[this.current]},{token:true,checkToken:true});
				uni.hideLoading();
				console.log(res.data.data);
				this.sum_output = res.data.data.sum_output;
				this.sum_machine = res.data.data.sum_machine;
				if (res.data.data.machine != undefined) {
					this.machine_list = res.data.data.machine;
				} else {
					this.machine_list = [];
				}
				
			},
			//打开日历
			openStart() {
				this.$refs.calendarStart.open()
			},
			confirmStart(e) {
				this.startDate = e.fulldate;
				this.getInitData();
				console.log('confirm 返回start:', e)
			},
			//跳转到tabBar页面
			linktoPage(urlStr){
				uni.switchTab({
					url:urlStr
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.getInitData();
				}
			},
			// 日历选中日期改变事件回调
			change(e) {
				this.startDate = e.selectedDate; 
				console.log(e)
			},
			//跳转页面
			linktoPage(urlStr){
				uni.switchTab({
					url:urlStr
				})
			}
		}
		
	}
</script>

<style>
	.calendar_container {
		/* min-height: calc(100vh - var(--window-top)); */
		/* background-color: #2D2D3D; */
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>